<template>
  <div class="goods-detail">
    <!-- 静态属性 -->
    <div class="attrs">
      <div class="item" v-for="item in detail.properties" :key="item.id">
        <span>{{ item.name }}：</span><span>{{ item.value }}</span>
      </div>
    </div>
    <!-- 详情内容 -->
    <div class="detail">
      <img
        v-for="img in detail.pictures"
        :key="img"
        :src="img"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-detail',
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style scoped lang='less'>
.goods-detail {
  padding: 25px;
  .attrs {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      display: flex;
      padding-bottom: 10px;
      span:first-child {
        width: 100px;
        color: #999;
      }
      span:last-child {
        flex: 1;
        color: #666;
      }
    }
  }
  .detail {
    img {
      width: 100%;
      min-height: 237px;
      background: url(../../../assets/images/750.png) no-repeat center / cover;
    }
  }
}
</style>
